<template>
  <a-card :bordered="false" >
    <div>
      <a-row :gutter="10">
        <a-col :md="10" :sm="24">
          <vxe-grid
            id="ExcelExportTemplateList"
            ref="vxeTable"
            :row-config="{isCurrent:true,keyField:'id'}"
            v-bind="gridOptions"
            v-on="listeners"
            @current-change="handleCurrentChange"
          >
            <template #action="{ row }">
              <template>
                <a @click="handleEdit(row)">编辑</a>
                <a-divider type="vertical" />
                <a-dropdown>
                  <a class="ant-dropdown-link">
                    更多 <a-icon type="down" />
                  </a>
                  <a-menu slot="overlay">
                    <a-menu-item @click="handleDetail(row)">详情</a-menu-item>
                    <!-- <a-menu-item @click="handleCreateColumn(row)">生成列</a-menu-item> -->
                    <a-menu-item>
                      <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(row.id)">
                        <a>删除</a>
                      </a-popconfirm>
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </template>
            </template>
          </vxe-grid>
        </a-col>
        <a-col :md="14" :sm="24">
          <ExcelExportColumnList ref="ExcelExportColumnList" :templateData="currentData" :tableLoading="loading" @ok="modalFormOk" />
        </a-col>
      </a-row>
    </div>
    <ExcelExportTemplateModal ref="modalForm" @ok="modalFormOk" />
  </a-card>
</template>

<script>
import VxeTableListMixin from '@/mixins/VxeTableListMixin'
import ExcelExportTemplateModal from './modules/ExcelExportTemplateModal'
import ExcelExportColumnList from './modules/ExcelExportColumnList'
import { getAction, postAction } from '@/services/manage'
export default {
  name: 'ExcelExportTemplateList',
  components: {
    ExcelExportTemplateModal,
    ExcelExportColumnList
  },
  mixins: [VxeTableListMixin],
  data() {
    return {
      currentData: {},
      columns: [
        { type: 'checkbox', width: 40, fixed: 'left' },
        { type: 'seq', width: 40, fixed: 'left' },
        {
          title: '方案编码',
          field: 'code',
          showOverflow: true,
          fixed: 'left'
        },
        {
          title: '文件名称',
          field: 'fileName',
          showOverflow: true
        },
        {
          title: '接口',
          field: 'api',
          showOverflow: true
        },
        {
          title: '操作',
          field: 'action',
          slots: { default: 'action' },
          width: 120,
          fixed: 'right'
        }
      ],
      url: {
        list: '/excel/export/solution/page',
        delete: '/excel/export/solution/remove/',
        deleteBatch: '/excel/export/solution/remove/',
        createColumn: '/excel/export/solution/column/create/'
      },
      toolbarConfig: {
        import: false,
        print: false,
        tools: []
      }
    }
  },
  methods: {
    handleCurrentChange({ newValue }) {
      this.currentData = Object.assign({}, newValue)
    },
    async loadTableData() {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      var params = this.getQueryParams()// 查询条件
      const res = await getAction(this.url.list, params)
      if (res.success) {
        this.dataSource = res.result.content
        this.setCurrentData()
      }
      return res
    },
    setCurrentData() {
      this.$refs.vxeTable.clearCurrentRow()
      let currentRow
      if (Object.keys(this.currentData).length > 0) {
        this.dataSource.forEach(item => {
          if (this.currentData.id === item.id) {
            currentRow = JSON.parse(JSON.stringify(item))
          }
        })
      }
      !currentRow ? currentRow = this.dataSource[0] || {} : ''
      this.currentData = Object.assign({}, currentRow)
      this.$refs.vxeTable.setCurrentRow(currentRow)
    },
    handleCreateColumn(row) {
      postAction(this.url.createColumn + row.id).then(res => {
        if (res.success) {
          this.loadData()
        }
      })
    }
  }
}
</script>

